import { IvButton } from '@/components';
import { useCallback, useEffect, useMemo, useState, useRef, memo } from 'react'
// 父组件
function ReactHooks(props) {
  // 1、useMemo: useMemo和useEffect有点类似 也是说指定那些参数改变后才会执行里面的方法 有点类似vue的计算属性
  const [a, setA] = useState(1)
  const [b, setB] = useState(1)
  const aUseMome = useMemo(() => {
    console.log('b改变了  我全没变');
    return a + b
  }, [a, b])
  const aUseMome2 = useMemo(() => {
    console.log('b改变了  我没变');
    
    return a + b
  }, [a])
  function onClick(type,callback) {
    callback()
    if (type === 'a') {
      setA(a + 1)
    } else {
      setB(b + 1)
    }
  }


  return (
    <div>

      <IvButton onClick={(e) => { onClick('a',e) }}>a++</IvButton>
      <IvButton onClick={(e) => { onClick('b',e) }}>b++</IvButton>
      <div>b改变了我也变：{aUseMome}</div>
      <div>b改变了  我没变：{aUseMome2}</div>
    </div>
  )
}
export default ReactHooks